<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>管理员控制台 - 铃声管理系统</title>
    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='style.css') }}">
</head>
<body>
    <div class="container">
        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;">
            <h1>铃声管理系统 <span class="admin-tag">管理员模式</span></h1>
            <div class="header-actions">
                <a href="/console?user={{ request.args.get('admin') }}" class="action-button secondary">返回普通控制台</a>
                <a href="/logout" class="action-button">退出登录</a>
            </div>
        </div>

        <!-- 管理员特有功能区域 -->
        <div class="card">
            <div class="section-title">管理员功能</div>
            <div class="feature-block">
                <h3>用户管理</h3>
                <p>这里可以添加、删除或修改用户账户</p>
                <button class="button" onclick="openUserManagementModal()">管理用户</button>
            </div>
            <div class="feature-block">
                <h3>配置文件管理</h3>
                <p>这里可以在线编辑每日铃声配置文件</p>
                <button class="button" onclick="openConfigManagementModal()">管理配置文件</button>
            </div>
        </div>

        <!-- 模态框遮罩层 -->
        <div id="modalOverlay" class="modal-overlay"></div>

        

        <!-- 配置文件管理模态框 -->
        <div id="configManagementModal" class="modal">
            <span onclick="closeConfigManagementModal()" style="float: right; cursor: pointer; font-size: 24px; color: #888; transition: color 0.2s;">&times;</span>
            <h2>配置文件管理</h2>
            
            <div style="margin-bottom: 20px;">
                <h3>选择配置文件</h3>
                <select id="configFileSelect" style="padding: 8px; margin-right: 10px;">
                    <option value="">请选择...</option>
                </select>
                <button onclick="loadConfigContent()" class="button">加载内容</button>
            </div>
            
            <div>
                <h3>配置内容编辑</h3>
                <textarea id="configContent" style="width: 100%; height: 300px; padding: 8px; font-family: 'Consolas', monospace; font-size: 14px; white-space: pre-wrap; background-color: #f8f9fa; border: 1px solid #ddd; line-height: 1.5; border-radius: 4px;"></textarea>
            </div>
            
            <div style="margin-top: 20px;">
                <button onclick="saveConfig()" class="button">保存修改</button>
            </div>
        </div>        
        <div id="userManagementModal" class="modal">            <span onclick="closeUserManagementModal()" style="float: right; cursor: pointer; font-size: 24px; color: #888; transition: color 0.2s;">&times;</span>
            <h2>用户管理</h2>
            
            <div style="margin-bottom: 20px;">
                <h3>添加新用户</h3>
                <input type="text" id="newUsername" placeholder="输入用户名" style="padding: 8px; margin-right: 10px;">
                <button onclick="addUser()" class="button">添加用户</button>
            </div>
            
            <div>
                <h3>用户列表</h3>
                <div id="userList"></div>
            </div>
        </div>

        <!-- 管理员功能区域下方留白 -->

    <script>
        // 管理员控制台专用JavaScript
        document.addEventListener('DOMContentLoaded', function() {
            console.log('管理员控制台已加载');
            // 点击遮罩层关闭模态框
            document.getElementById('modalOverlay').addEventListener('click', closeUserManagementModal);
        });
        
        // 配置文件管理功能
        function openConfigManagementModal() {
            document.getElementById('configManagementModal').style.display = 'block';
            document.getElementById('modalOverlay').style.display = 'block';
            loadConfigFiles();
        }

        function closeConfigManagementModal() {
            document.getElementById('configManagementModal').style.display = 'none';
            document.getElementById('modalOverlay').style.display = 'none';
        }

        function loadConfigFiles() {
            fetch('/admin/get_config_files')
                .then(response => response.json())
                .then(files => {
                    const select = document.getElementById('configFileSelect');
                    select.innerHTML = '<option value="">请选择...</option>';
                    files.forEach(file => {
                        const option = document.createElement('option');
                        option.value = file;
                        option.textContent = file;
                        select.appendChild(option);
                    });
                });
        }

        function loadConfigContent() {
    const file = document.getElementById('configFileSelect').value;
    if (!file) {
        alert('请选择配置文件');
        return;
    }
    fetch(`/admin/load_config?file=${encodeURIComponent(file)}`)
        .then(response => response.text())
        .then(content => {
            // 解析INI内容为结构化数据
            // 解析JSON获取content字段并处理换行
            const jsonData = JSON.parse(content);
            const configText = jsonData.content.replace(/\\n/g, '\n'); // 将转义的\n替换为实际换行
            
            // 填充到文本编辑区
            const editContainer = document.getElementById('configContent');
            editContainer.value = configText; // 假设configContent是textarea，使用value属性
        });
}

        function saveConfig() {
            const file = document.getElementById('configFileSelect').value;
            const content = document.getElementById('configContent').value;
            if (!file || !content) {
                alert('请选择配置文件并填写内容');
                return;
            }
            fetch('/admin/save_config', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ file: file, content: content })
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    alert('配置文件保存成功');
                } else {
                    alert(data.message);
                }
            });
        }

        // 用户管理功能
        function openUserManagementModal() {
            document.getElementById('userManagementModal').style.display = 'block';
            document.getElementById('modalOverlay').style.display = 'block';
            loadUserList();
        }

        function closeUserManagementModal() {
            document.getElementById('userManagementModal').style.display = 'none';
            document.getElementById('modalOverlay').style.display = 'none';
        }
        
        function loadUserList() {
            fetch('/admin/get_users')
                .then(response => response.json())
                .then(users => {
                    const userList = document.getElementById('userList');
                    userList.innerHTML = '';
                    
                    if (users.length === 0) {
                        userList.innerHTML = '<p>暂无用户</p>';
                        return;
                    }
                    
                    users.forEach(user => {
                        const userItem = document.createElement('div');
                        userItem.style.display = 'flex';
                        userItem.style.justifyContent = 'space-between';
                        userItem.style.alignItems = 'center';
                        userItem.style.padding = '8px 0';
                        userItem.style.borderBottom = '1px solid #eee';
                        
                        userItem.innerHTML = `
                            <span>${user.username}</span>
                            <div>
                                <button onclick="showPassword('${user.username}', '${user.password}')" style="margin-right: 10px;">查看密码</button>
                                <button onclick="deleteUser('${user.username}')" style="background-color: #e74c3c;">删除</button>
                            </div>
                        `;
                        userList.appendChild(userItem);
                    });
                });
        }
        
        function addUser() {
            const username = document.getElementById('newUsername').value.trim();
            if (!username) {
                alert('请输入用户名');
                return;
            }
            
            fetch('/admin/add_user', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ username: username })
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    document.getElementById('passwordDisplay').textContent = `用户创建成功！密码: ${data.password}`;
                    document.getElementById('newUsername').value = '';
                    loadUserList();
                } else {
                    alert(data.message);
                }
            });
        }
        
        function showPassword(username, password) {
            alert(`用户 ${username} 的密码: ${password}`);
        }
        
        function deleteUser(username) {
            if (confirm(`确定要删除用户 ${username} 吗？`)) {
                fetch('/admin/delete_user', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({ username: username })
                })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        loadUserList();
                    } else {
                        alert(data.message);
                    }
                });
            }
        }
    </script>


        <!-- 管理员功能区域下方留白 -->
        <div class="card">
            <div class="section-title">关于管理员面板</div>
            <div class="admin-hr"></div>
            <p>此面板仅包含管理员特有功能。如需使用普通功能，请返回普通控制台。</p>
        </div>
    </div>

    <script>
        // 管理员控制台专用JavaScript
        document.addEventListener('DOMContentLoaded', function() {
            console.log('管理员控制台已加载');
        });
    </script>
</body>
</html>